<template>
  <div class="app-container home" @wheel="handleGlobalWheel">
    <!-- 背景轮播容器 -->
    <div class="bg-carousel-container">
      <div 
        v-for="(img, index) in loadedImages" 
        :key="index" 
        :class="['bg-slide', { active: currentSlide === index }]"
        :style="{ backgroundImage: img.loaded ? `url(${img.src})` : 'none' }"
      ></div>
      
      <!-- 滑动指示器 -->
      <!-- <div v-if="loadedImages.length > 1" class="slide-indicators">
        <div 
          v-for="(img, index) in loadedImages" 
          :key="index" 
          :class="{ 'indicator-active': currentSlide === index }"
          @click="currentSlide = index"
        ></div>
      </div> -->
    </div>

    <!-- 固定顶部区域 -->
    <div class="fixed-top">
      <div class="header-content">
        <el-row :gutter="20">
          <el-col :sm="24" :lg="24">
            <h2>学生管理框架</h2>
          </el-col>
        </el-row>
        <el-divider />
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 通知公告卡片 -->
      <el-card class="content-card">
        <div slot="header" class="clearfix card-header">
          <div class="header-title">
            <i class="el-icon-bell text-primary mr-2"></i>
            <span>通知公告</span>
          </div>
         
        </div>
        
        <div 
          class="announcement-container"
          ref="announcementContainer"
          @wheel.passive="handleAnnouncementWheel"
          @mouseenter="pauseAutoScroll"
          @mouseleave="resumeAutoScroll"
        >
          <div class="scroller" :style="{ transform: `translateY(-${scrollOffset}px)` }">
            <div 
              v-for="notice in allNotices" 
              :key="notice.id" 
              class="notice-item"
              @click="showNoticeDetail(notice)"
              :style="{ height: itemHeight + 'px' }"
            >
              <div class="notice-icon">
                <i class="el-icon-bell text-primary"></i>
              </div>
              <div class="notice-content">
                <div class="notice-date font-medium">{{ parseTime(notice.date, '{y}-{m}-{d}') }}</div>
                <div class="notice-text">{{ notice.title }}</div>
              </div>
            </div>
          </div>
          <div v-if="showEndTip" class="end-tip">已经到底了，即将跳转回第一条</div>
        </div>
      </el-card>
    </div>

    <!-- 底部导航卡片 -->
    <div class="fixed-bottom">
      <div class="bottom-nav-container">
        <div v-for="(nav, idx) in navItems" :key="idx" class="nav-wrapper">
          <el-card 
            class="nav-card" 
            shadow="hover"
            :class="{ 'nav-active': isNavActive(idx) }"
          >
            <div class="nav-icon-container">
              <div class="nav-icon">
                <i :class="nav.icon"></i>
              </div>
            </div>
            <div class="nav-text">{{ nav.title }}</div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loadingStatus === 'loading'" class="loading-overlay">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <p class="mt-3">正在加载校园服务，请稍候...</p>
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="loadingStatus === 'error'" class="error-overlay">
      <el-alert
        title="加载失败"
        type="error"
        :closable="false"
        show-icon
        class="animated-alert"
      >
        <template #content>
          <div class="error-details">
            <p>背景资源加载异常，请检查网络或联系管理员</p>
            <ul class="mt-2">
              <li v-for="(error, idx) in loadingErrors" :key="idx">
                {{ error.message }}
              </li>
            </ul>
          </div>
        </template>
      </el-alert>
    </div>

    <!-- 公告详情悬浮窗 -->
    <el-dialog :title="noticeDetail.title" :visible.sync="noticeDialogVisible" width="700px" append-to-body>
      <el-form ref="detailForm" :model="noticeDetail" label-width="80px">
        <el-form-item label="公告时间">
          <span>{{ parseTime(noticeDetail.date, '{y}-{m}-{d}') }}</span>
        </el-form-item>
        <el-form-item label="公告标题">
          <span>{{ noticeDetail.title }}</span>
        </el-form-item>
        <el-form-item label="公告内容">
          <div class="rich-text-content" v-html="noticeDetail.content"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listNotice } from "@/api/notice/notice";
import { parseTime } from "@/utils/date";

export default {
  name: "Index",
  data() {
    return {
      allNotices: [],
      navItems: [
        { title: '个人中心', icon: 'el-icon-user-solid', route: '/user' },
        { title: '图书馆', icon: 'el-icon-document', route: '/library' },
        { title: '联系我们', icon: 'el-icon-phone', route: '/contact' }
      ],
      originalBgImages: [
        require("../assets/images/轮播1.png"),
        require("../assets/images/轮播2.png"),
        require("../assets/images/轮播3.png"),
        require("../assets/images/轮播4.png"),
        require("../assets/images/轮播5.png")
      ],
      loadedImages: [],
      loadingErrors: [],
      currentSlide: 0,
      slideInterval: null,
      loadingStatus: 'loading',
      noticeDialogVisible: false,
      noticeDetail: {},

      // 滚动相关属性
      itemHeight: 80,
      scrollOffset: 0,
      autoScroll: true,
      scrollInterval: null,
      showEndTip: false,
      isScrollingToTop: false
    };
  },
  computed: {
    maxScroll() {
      return this.allNotices.length * this.itemHeight;
    }
  },
  created() {
    this.getNoticeList();
    this.preloadImages();
  },
  mounted() {
    this.preloadImages();
    this.initCarousel();
  },
  beforeDestroy() {
    this.stopSlideShow();
    this.stopAutoScroll();
  },
  methods: {
    handleGlobalWheel(event) {
      const isAnnouncementArea = this.$refs.announcementContainer?.contains(event.target);
      if (!isAnnouncementArea) {
        event.preventDefault();
        const delta = Math.sign(event.deltaY);
        this.currentSlide = (this.currentSlide + delta + this.loadedImages.length) % this.loadedImages.length;
      }
    },

    checkScrollEnd() {
      if (this.scrollOffset >= this.maxScroll - this.itemHeight) {
        this.handleScrollEnd();
      }
    },

    handleScrollEnd() {
      this.pauseAutoScroll();
      this.showEndTip = true;
      this.isScrollingToTop = true;
      setTimeout(() => {
        this.scrollOffset = 0;
        this.showEndTip = false;
        if (!this.isScrollingToTop) this.resumeAutoScroll();
        this.isScrollingToTop = false;
      }, 3000);
    },

    handleAnnouncementWheel(e) {
      if (this.showEndTip) {
        e.preventDefault();
        return;
      }

      e.preventDefault();
      const delta = e.deltaY > 0 ? 1 : -1;
      this.scrollOffset = Math.max(0, 
        Math.min(this.scrollOffset + delta * 40, this.maxScroll)
      );
      this.checkScrollEnd();
      e.stopPropagation();
    },

    preloadImages() {
      try {
        this.loadedImages = this.originalBgImages.map(src => ({
          src,
          loaded: false
        }));

        const loadPromises = this.originalBgImages.map((src, index) => 
          new Promise((resolve, reject) => {
            const img = new Image();
            img.alt = `校园风景${index+1}`;
            img.onload = () => {
              this.$set(this.loadedImages[index], 'loaded', true);
              resolve();
            };
            img.onerror = (e) => {
              this.loadingErrors.push({
                message: `图片加载失败: ${src}`,
                url: src
              });
              reject(e);
            };
            img.src = src;
          })
        );

        Promise.all(loadPromises)
          .then(() => {
            this.loadingStatus = 'success';
            this.startSlideShow();
          })
          .catch(error => {
            this.loadingStatus = 'error';
            console.error('资源加载失败:', error);
          });
      } catch (error) {
        this.loadingStatus = 'error';
        console.error('初始化错误:', error);
      }
    },

    startSlideShow() {
      const loadedCount = this.loadedImages.filter(img => img.loaded).length;
      if (loadedCount < 2) return;

      this.slideInterval = setInterval(() => {
        let nextSlide = (this.currentSlide + 1) % this.loadedImages.length;
        while (!this.loadedImages[nextSlide].loaded) {
          nextSlide = (nextSlide + 1) % this.loadedImages.length;
        }
        this.currentSlide = nextSlide;
      }, 5000);
    },

    stopSlideShow() {
      clearInterval(this.slideInterval);
    },
    goToNotice(notice) {
      this.$router.push(`/notice/${notice.id}`);
    },
    isNavActive(idx) {
      return this.$route.path.includes(this.navItems[idx].route);
    },

    initCarousel() {
      this.scrollInterval = setInterval(() => {
        if (!this.autoScroll || this.showEndTip) return;
        this.scrollOffset += 1;
        this.checkScrollEnd();
      }, 30);
    },

    pauseAutoScroll() {
      this.autoScroll = false;
    },

    resumeAutoScroll() {
      this.autoScroll = true;
    },

    stopAutoScroll() {
      clearInterval(this.scrollInterval);
      clearInterval(this.slideInterval);
    },

    getNoticeList() {
      listNotice({ pageNum: 1, pageSize: 20 }).then(response => {
        this.allNotices = response.rows;
      });
    },

    showNoticeDetail(notice) {
      this.noticeDetail = notice;
      this.noticeDialogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
:root {
  --primary-color: #409eff;
  --secondary-color: #67c23a;
  --text-color: #303133;
  --light-bg: rgba(255, 255, 255, 0.7);
  --card-hover: rgba(240, 249, 255, 0.9);
}



.home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', 'Microsoft YaHei', sans-serif;
  color: var(--text-color);
}

.bg-carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 8s ease;
  will-change: opacity, transform;
  filter: brightness(0.95);
  transform: scale(1.05);

  &.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05) inset;
  }
}

.slide-indicators {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;

  div {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;

    &.indicator-active {
      width: 24px;
      border-radius: 6px;
      background-color: var(--primary-color);
      box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
    }
  }
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 32px 64px 0 264px;
  background: linear-gradient(
    to right,
    // rgba(255, 255, 255, 0.4) 0%,
    // rgba(255, 255, 255, 0.15) 30%,
    // rgba(255, 255, 255, 0.15) 70%,
    // rgba(255, 255, 255, 0.4) 100%
   rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  mask: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}

.header-content {
  max-width: 1440px;
  margin: 0 auto;
}

h2 {
  position: relative;
  padding: 8px 60px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 80%;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #2c3e50;
  left: -50px;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40px;
    right: -40px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(255, 255, 255, 0.1) 60%,
      rgba(255, 255, 255, 0.4) 100%
    );
    z-index: -1;
    border-radius: 16px;
  }
  
  &::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 30px;
    height: 70%;
    width: 8px;
    background: var(--primary-color);
    height: clamp(1.8rem, 3vw, 2.5rem);
    background-color: var(--primary-color);
    margin-right: 18px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
    top: 15%;
  }
    
  &:hover {
    transform: translateX(4px);
  }
}

.el-divider {
  margin: 24px 0;
  border-color: rgba(220, 220, 220, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(220, 220, 220, 0.5);
  }
}

.main-content {
  position: absolute;
  top: 130px;
  right: 0;
  bottom: 160px;
  left: -50px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  z-index: 2;
  padding: 0 64px;
  overflow-y: auto;
  transition: all 0.3s ease;
  
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(170, 170, 170, 0.5);
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(170, 170, 170, 0.7);
  }
}

.content-card {
  border-radius: 24px;
  margin-left: 200px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  background: var(--light-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

.card-header {
  padding: 24px 32px;
  border-bottom: 1px solid #ebf0f7;
  display: flex;
  background-color: rgba(255, 255, 255, 0.3);
  width: 220px;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  // color: #2c3e50;
  color: #0b4075;
  //字体加粗
  font-weight: bold;
  border-radius: 12px 12px 0 0;
  transition: all 0.3s ease;
  //字体样式
  font-family: 'Inter', 'Microsoft YaHei', sans-serif;
  //字体之间的距离
  letter-spacing: 13px;
  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}

.header-title {
  display: flex;
  align-items: center;
}

.announcement-container {
  height: 400px;
  overflow: hidden;
  position: relative;
  perspective: 1000px;
  transition: all 0.3s ease;
  margin-left: 10px;

  &:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) inset;
  }
}

.scroller {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
}

.notice-item {
  padding: 20px 32px;
  border-bottom: 1px solid rgba(235, 240, 247, 0.3);
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateZ(0);
  backface-visibility: hidden;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.6);
  }
  
  &:hover {
    transform: translateX(8px) scale(1.02) translateZ(20px);
    background-color: var(--card-hover);
    box-shadow: -4px 0 0 var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 2;
    background-color: rgba(255, 255, 255, 1);
  }
}

.notice-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  
  .notice-item:hover & {
    background-color: rgba(64, 158, 255, 1);
    transform: scale(1.1);
  }
}

.notice-content {
  flex-grow: 1;
}

.notice-date {
  color: #606266;
  margin-bottom: 4px;
  font-size: 14px;
}

.notice-text {
  color: var(--text-color);
  transition: all 0.3s ease;
  
  .notice-item:hover & {
    color: #0f559f;
    font-size: 16px;
  }
}

.end-tip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  animation: fadeInUp 0.5s ease;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.fixed-bottom {
  position: fixed;
  bottom: -15px;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 64px 32px 10px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.bottom-nav-container {
  display: flex;
  justify-content: space-between;
  gap: 150px;
  max-width: 800px;
  margin: 0 auto;
}

.nav-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  flex: 1;
  transform-style: preserve-3d;
  width: 250px;
  margin-left: -10px;

  &:hover {
    transform: translateY(-8px) rotateX(3deg);
    box-shadow: 0 15px 30px rgba(64, 158, 255, 0.15);
    background: rgba(255, 255, 255, 1);
    border-color: rgba(64, 158, 255, 0.3);
  }
  
  &.nav-active {
    background: rgba(240, 249, 255, 0.3);
    box-shadow: 0 12px 25px rgba(64, 158, 255, 0.15);
    border-color: rgba(64, 158, 255, 0.4);
    transform: translateY(-5px) rotateX(2deg);
    
    .nav-icon-container {
      background-color: rgba(64, 158, 255, 0.2);
      
      .nav-icon {
        color: var(--primary-color);
        transform: scale(1.1);
      }
    }
  }
}

.nav-wrapper::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 8px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 50%;
  filter: blur(6px);
  transition: all 0.3s ease;
  z-index: -1;
}

.nav-wrapper:hover::after {
  width: 80%;
  background: rgba(64, 158, 255, 0.2);
}

.nav-icon-container {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  transform: translateZ(15px);
  
  .nav-card:hover & {
    background-color: rgba(64, 158, 255, 0.2);
    transform: translateZ(20px) scale(1.05);
  }
}

.nav-icon {
  font-size: 28px;
  color: var(--primary-color);
  transition: all 0.3s ease;
  transform: translateZ(15px);
}

.nav-text {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: translateZ(10px);
  
  .nav-card:hover & {
    transform: translateZ(15px) translateY(1px);
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100;
  transition: all 0.3s ease;
}

.loading-content {
  text-align: center;
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.02);
  }
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(64, 158, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s linear infinite;
  margin: 0 auto 20px auto;
}

.error-overlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  z-index: 100;
  transition: all 0.3s ease;
}

.animated-alert {
  animation: fadeIn 0.5s ease;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.el-dialog {
  // 确保对话框内内容有合适的内边距
  .el-form-item {
    // 限制公告内容区域的最大高度，防止内容溢出
    .rich-text-content {
      max-height: 400px; // 根据实际情况调整
      overflow-y: auto; // 内容超出时显示垂直滚动条
      
      img {
        max-width: 100% !important; // 强制图片最大宽度不超过容器宽度
        max-height: 300px; // 限制图片最大高度，根据实际情况调整
        height: auto !important; // 保持图片宽高比
        display: block; // 去除图片底部间隙
        margin: 0 auto; // 图片居中显示
        object-fit: contain; // 确保图片完整显示在容器内
      }
    }
  }
}

.rich-text-content {
  line-height: 1.8;
  color: #303133;
  
  p {
    margin-bottom: 16px;
  }
  
  h3 {
    font-size: 18px;
    color: #2c3e50;
    margin-top: 24px;
    margin-bottom: 12px;
  }
  
  ul, ol {
    margin-left: 24px;
    margin-bottom: 16px;
  }
  
  li {
    margin-bottom: 8px;
  }
  
  a {
    color: var(--primary-color);
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }

  // 添加图片样式
  img {
    max-width: 100%; // 图片最大宽度不超过容器宽度
    height: auto; // 保持图片宽高比
    display: block; // 去除图片底部间隙
    margin: 0 auto; // 图片居中显示
  }
}
</style>  